require('../less/sportstwo.less')

require('../fonts/iconfont.css')

document.ready(function () {

    const countzero = document.querySelector("#countzero")  //获取倒计时
    const countdown = document.querySelector(".countdown")  //倒计时蒙层
    const movement = document.querySelector(".movement")  //运动蒙层
    const when = document.querySelector("#when")//格式化时间

    const zanting = document.querySelector(".zanting") //暂停
    const jixu = document.querySelector(".jixu")//继续
    const jieshu = document.querySelector(".jieshu")//继续

    let timer = null  //计时器
    let chushi = 0   //计时器初始值

    const icondingwei = document.querySelector("#icondingwei") //图标显示地图蒙层
    const mapModal = document.querySelector("#mapModal") //地图蒙层
    const back = document.querySelector("#back") //返回按钮
    const useTime = document.querySelector("#useTime") //地图蒙层里的计时
    const sucess = document.querySelector("#sucess") //完成按钮

    const kilometer = document.querySelector(".kilometer") //一直在动的保留2位小数千米
    const peisu = document.querySelector(".peisu")//配速
    const kaluli = document.querySelector(".kaluli") //卡路里
    const pingjunpeisu = document.querySelector(".pingjunpeisu") //平均配速
    const juli = document.querySelector(".juli")


    //定义变量保存最终的距离
    let ultimately = 0
    //定义新卡路里
    let kale = 0



    const map = new BMap.Map("amap");//创建地图实例 拆分出来的地图,因为要实时获取终点,必须拆出来
    let interval = 0.0001   //设置地图增加值

    let aggregate = []   //空数组放金纬度
    let shuliang = 0   //设置计时器

    utils.registers()//是否登录

    /*设置数组倒计时事件  */
    function enter() {

        const timeset = [3, 2, 1, "GO"]

        let index = 0//索引
        let jishiqi = setInterval(function () {
            index++//自增一
            countzero.textContent = timeset[index]
            if (index === timeset.length) {
                clearInterval(jishiqi)
                countdown.style.display = "none",
                    movement.style.display = "block"
                //倒计时结束后才调用
                startExercise()

            }
            /*  console.log(1); */

        }, 1000)

    }
    enter()

    //开始运动
    function startExercise() {
        //定义一个初始值

        timer = setInterval(function () {
            chushi++

            when.textContent = utils.theTimTto(chushi);
            //地图蒙层时间
            useTime.textContent = utils.theTimTto(chushi);

            mymap()//动态获取经纬度
        }, 1000)

    }



    /* 暂停 */
    zanting.addEventListener("click", function () {
        zanting.style.display = "none",//干掉暂停
            jixu.style.display = "flex",   //出现继续 
            jieshu.style.display = "flex"  //出现结束
        clearInterval(timer)
    })

    //继续
    jixu.addEventListener("click", function () {
        zanting.style.display = "flex",//出现暂停
            jixu.style.display = "none",   //干掉继续 
            jieshu.style.display = "none"  //干掉结束
        startExercise()

    })

    //结束
    jieshu.addEventListener("click", function () {
        /*  console.log("运动结束"); */
        movement.style.display = "none",
            mapModal.style.display = "block",
            sucess.style.display = "block"

        /* 要添加的终点    地图,        要添加的点  ,点的图标*/
        utils.addMarker(map, aggregate[shuliang - 1], require("../imgs/end.png"))

    })

    /* 图标显示运动图层 */
    icondingwei.addEventListener("click", function () {
        movement.style.display = "none",
            mapModal.style.display = "block",
            back.style.display = "block"
    })
    //点击返回干掉地图蒙层
    back.addEventListener("click", function () {
        mapModal.style.display = "none",
            back.style.display = "none",
            movement.style.display = "block"
    })

    /* 初始化地图 */
    /* 初始化地图 */
    function mymap() {



        /* 地图动态定位 使用浏览器定位*/
        const geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                /*   var mk = new BMap.Marker(r.point);
                  map.addOverlay(mk);
                  map.panTo(r.point);
                  alert('您的位置：' + r.point.lng + ',' + r.point.lat); */
                interval += 0.0001
                // console.log(r); //打印出自己城市的坐标

                const lng = parseFloat(r.longitude) + interval  //获取增加金度
                const lat = parseFloat(r.latitude) + interval      //获取增加伟度
                /*  console.log(longitude, latitude); */

                aggregate.push({ lng, lat })//将每次的经纬度放入空数组
                shuliang++    //计数器
                /* console.log(aggregate, shuliang); */

                //添加的起点   在上面的结束里面画终点
                if (shuliang === 1) {
                    //调用函数来画图起点把  地图,       要添加的点  ,点的图标
                    utils.addMarker(map, aggregate[0], require("../imgs/start.png"))
                }




                //计算总运动距离
                //定义变量保存最终的距离
                ultimately = 0
                //遍历
                for (let i = 0; i < aggregate.length - 1; i++) {
                    //第一个点
                    let one = aggregate[i]
                    //第二个点
                    let two = aggregate[i + 1]

                    //调用函数就是让第二个点减去第一个点
                    ultimately += parseFloat(utils.calcDistance(one, two))


                    //画折线
                    utils.quxian(map, one, two)
                }

                kilometer.textContent = ultimately.toFixed(2)//渲染公里
                /* console.log(ultimately); */

                /* 计算配速   距离 和时间*/
                peisu.textContent = utils.calcPace(ultimately, chushi)

                //计算卡路里
                kaluli.textContent = kale = utils.calCalorie(ultimately)

                /* 蒙层地图平均配速 */ /*  (ultimately / chushi).toFixed(2) */

                pingjunpeisu.textContent = utils.calcPace(ultimately, chushi)  //蒙层地图配速
                /* (ultimately / chushi).toFixed(2) */

                /*  utils.calcPace(ultimately, chushi) */
                juli.textContent = ultimately.toFixed(2)  //蒙层地图千卡


                const point = new BMap.Point(lng, lat); //设置中心点坐标
                map.centerAndZoom(point, 15);//地图初始化，同时设置地图展示级别

                /*  console.log(BMAP_STATUS_SUCCESS); */
            }
            else {
                alert("地图失踪");
            }
        });
    }

    /* 点击完成后保存运动数据 */
    sucess.addEventListener("click", function () {

        //配置参数
        const parameter = {
            id: localStorage.getItem("userId"),//用户id
            type: 1,//跑步
            takeTime: +ultimately.toFixed(2),//运动距离 +等于转成数字  /* b不能只加toFixed(2),因为加了会变成字符串,在这次根据文档配置的参数不能是字符串 */
            miles: +(ultimately / chushi).toFixed(2), //平均速度 配速
            averagerate: chushi,//运动时间
            calorie: +kale,//卡路里

            // type: 1,
            //  takeTime: 66666,
            //  miles: 5555,
            // averagerate: 666,
            // calorie: 6666,
        }
        /*   console.log(parameter); */

        //发请求 保存运动数据
        $http.post("/sports/save", parameter, function (res) {
            if (res.status === 0) {
                /*    console.log(res); */
                alert("返回跑步")
                setTimeout(function () {
                    location.href = "./sports.html"
                }, 2000)
            }
        })



    })



})